<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初学JS</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<script>
<!--    严格检查格式-->
    "use strict";
</script>
<body>
<!--百度换肤-->
<ul class="baidu">
    <li><img src="img/3.jpg"></li>
    <li><img src="img/4.jpg"></li>
    <li><img src="img/5.jpg"></li>
    <li><img src="img/6.jpg"></li>
</ul>
<br>
----------------------------------------------------
<br>
<ol id="ol">
    <li>知否知否，等你好久1</li>
    <li>知否知否，等你好久2</li>
    <li>知否知否，等你好久3</li>
</ol>
----------------------------------------------------
<br>
<div class="box1">选择器盒子</div>
<div id="nav">
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
</div>
----------------------------------------------------
<br>
<button class="showTime">点击显示系统时间</button>
<div class="showTime1" style="color: aqua;height: 20px">
    点击后显示系统时间
</div>
<p>刷新得时间</p>
----------------------------------------------------
<br>
<button id="one">第一张图片</button>
<button id="two">第二张图片</button>
<br>
<br>
<img height="212" src="img/1.jpg" title="第一张图片"/>
<br>
<br>
----------------------------------------------------
<div id="aft">上午好</div>
----------------------------------------------------
<br>
<button id="btn1">按键</button>
<input type="text" value="输入的内容">
<br>
----------------------------------------------------
<!--仿京东登录-->
<div class="box2">
    <label for="">
        <img alt="" id="eye" src="img/2.jpg">
    </label>
    <input id="password" name="" type="password">
</div>
<br>
----------------------------------------------------
<div id="box3"></div>
----------------------------------------------------
<!--显示和隐藏元素-->
<div class="box4">
    按钮关闭图片元素
    <img alt="" src="img/1.jpg">
    <i class="class-btn">x</i>
</div>
----------------------------------------------------
<div class="box5">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
----------------------------------------------------
<br>
<input id="input3" style="color: #999" type="text" value="默认字段">
<br>
----------------------------------------------------
<br>
<div class="box6">文本</div>
<br>
----------------------------------------------------
<!--判断输入的密码是否符合规定-->
<br>
<div class="register">
    <input class="ipt" type="password">
    <p class="message">请输入6~16位密码</p>
</div>
<br>
----------------------------------------------------
<br>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<br>
----------------------------------------------------
<br>
<!--数据表格隔行变色-->
<table>
    <thead>
    <tr>
        <th>代码</th>
        <th>名称</th>
        <th>最新公布净值</th>
        <th>累计净值</th>
        <th>前单位净值</th>
        <th>净值增长率</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    </tbody>
</table>
----------------------------------------------------
<br>
<!--表单全选功能-->
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input id="j_cbAll" type="checkbox"/>
            </th>
            <th>商品</th>
            <th>价钱</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>iPad Pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>

        </tbody>
    </table>
</div>
<br>
----------------------------------------------------
<br>
<!--自定义属性选择-->
<div class="nav" id="demo" index="1"></div>
<br>

<br>
<!--tab卡片切换-->
<div class="tab">
    <div class="tab_list">
        <ul>
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价（50000）</li>
            <li>手机社区</li>
        </ul>
    </div>
    <div class="tab_con">
        <div class="item" style="display: block;">
            商品介绍模块内容
        </div>
        <div class="item">
            规格与包装模块内容
        </div>
        <div class="item">
            售后保障模块内容
        </div>
        <div class="item">
            商品评价（50000）模块内容
        </div>
        <div class="item">
            手机社区模块内容
        </div>

    </div>
</div>
----------------------------------------------------
----------------------------------------------------
</body>
<script src="js/jsBasics/indexBasics.js"></script>
<script src="js/jsBasics/indexMethod.js"></script>
<script src="js/jsWebAPIS/WebAPISOneDay.js"></script>
</html>






